<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width:auto;
            height: 48px;
            padding: 10px 300px;
            margin: 0px 300px;
            border: 1px rgba(23,25,25,.3);
            position: fixed;
        }
        h1{
            position: fixed;
        }
        main{
            width: 1000px;
            height: 500px;
            margin: 0px 250px;
            position: relative;
            top:80px;
        }
        #div_left{
            width: 450px;
            height: 100%;
            position: relative;
            overflow: auto;
        }
        #div_right{
            width: 550px;
            height: 100%;
            position: absolute;
            left: 450px;
            bottom: 0px;
            overflow: auto;
        }
          td{
            width: 100px;
            line-height: 48px;
            padding: 0px 15px;
            font-size: 18px;
            border: #c7c6c6 1px solid;
            background-color: #c7c6c6;
            text-align: center;
        }
        #shopingInput{
            width: auto;
            height: 48px;
            margin: 0px 30px;
            padding: 5px 15px;
            position: relative;
        }
    </style>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        let i=1;
        function addShop(){
            let shopNameInput=document.getElementById("shopName");
            let shop_name=shopNameInput.value;
            let addinput= document.createElement("input")
            let tr=document.createElement("tr");
            let tdNumber=document.createElement("td");
            tdNumber.innerText=i;
            i++;
            let tdShopName=document.createElement("td");
            tdShopName.innerText=shop_name;
            tr.appendChild(tdNumber)
            tr.appendChild(tdShopName)
            tr.appendChild(addinput)
            let tb=document.getElementById("shopBody");
            tb.appendChild(tr);

        }
    </script>

    </script>
</head>
<body>
<header>
    <h1>图书购物车</h1>
</header>
<main>
    <div id="div_left">
        <table>
            <tr>
                <td>序号</td>
                <td>书名</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>1</td>
                <td>西游记</td>
                <td>￥79</td>
            </tr>
            <tr>
                <td>2</td>
                <td>水浒传</td>
                <td>￥88</td>
            </tr>
            <tr>
                <td>3</td>
                <td>红楼梦</td>
                <td>￥98</td>
            </tr>
            <tr>
                <td>4</td>
                <td>三国演义</td>
                <td>￥101</td>
            </tr>
            <tr>
                <td>5</td>
                <td>围城</td>
                <td>￥88</td>
            </tr>
            <tr>
                <td>6</td>
                <td>三体全套</td>
                <td>199</td>
            </tr>
            <tr>
                <td>7</td>
                <td>平凡的世界</td>
                <td>￥189</td>
            </tr>
            <tr>
                <td>8</td>
                <td>资治通鉴</td>
                <td>￥77</td>
            </tr>
            <tr>
                <td>9</td>
                <td>天龙八部</td>
                <td>￥99</td>
            </tr>
            <tr>
                <td>10</td>
                <td>百年孤独</td>
                <td>￥49</td>
            </tr>
            <tr>
                <td>11</td>
                <td>罗翔讲刑法</td>
                <td>￥99</td>
            </tr>
            <tr>
                <td>12</td>
                <td>数据结构</td>
                <td>￥33</td>
            </tr>
            <tr>
                <td>13</td>
                <td>线性代数</td>
                <td>￥107</td>
            </tr>
            <tr>
                <td>14</td>
                <td>高数上下册</td>
                <td>￥28</td>
            </tr>
        </table>
    </div>
    <div id="div_right">
      <div id="shopingInput">
          输入书名<input id="shopName" type="text" > <botton onclick="addShop()">添加到购物车</botton>
      </div>
        <table id="produce">
           <tr>
               <td id="bookNumber">序号</td>
               <td id="bookName">书名</td>
           </tr>
            <tbody id="shopBody">

            </tbody>
        </table>
    </div>
</main>
</body>
</html>